<template>
  <view class="car-maintenance-item" @click="jumpStore">
    <view class="store" :class="{'no-service': !item.service_project}">
      <u-image :src="item.store_topimg ? item.store_topimg + '!/fw/240' : defaultImg" width="240" height="160" border-radius="10" mode="aspectFit"></u-image>
      <view class="info">
        <view class="title-wrapper">
          <text class="title">{{item.store_name | cutString(22)}}</text>
          <text class="type" :class="'type-' + item.store_type">{{item.store_type | formatStoreType}}</text>
        </view>
        <view class="address-wrapper">
          <text class="address">{{item.address}}</text>
          <text class="distance">{{item.distance}}km</text>
        </view>
        <view class="time-wrapper">
          <text class="time">{{item.bussinesstime}}</text>
          <!-- <view class="live-broadcast">
            <text class="iconfont iconicon1"></text>
            <text class="text">门店实况直播</text>
          </view> -->
        </view>
      </view>
    </view>
    <view class="service-items" v-if="item.service_project">
      <text class="label">服务项目</text>
      <view class="service-items-list">
        <view class="item" v-if="item.service_project.car_wash"><text class="text">洗车</text></view>
        <view class="item" v-if="item.service_project.car_beauty"><text class="text">美容</text></view>
        <view class="item" v-if="item.service_project.tyre"><text class="text">轮胎</text></view>
        <view class="item" v-if="item.service_project.metal_plate"><text class="text">钣金</text></view>
        <view class="item" v-if="item.service_project.maintain"><text class="text">保养</text></view>
        <view class="item" v-if="item.service_project.spray_lacquer"><text class="text">喷漆</text></view>
        <view class="item" v-if="item.service_project.refit"><text class="text">改装</text></view>
        <view class="item" v-if="item.service_project.install"><text class="text">安装</text></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultImg: 'https://files.yzsheng.com/client/store/mentouzhao.png'
    }
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  filters: {
    formatStoreType(data){
      let text = ''
      switch(Number(data)) {
        case 1:
        case 6:
          text = '旗舰店'
          break
        case 0:
        case 2:
          text = '体验店'
          break
        case 3:
        case 8:
          text = '中心店'
          break
        case 4:
          text = '4s店'
          break
        default:
          text = '旗舰店'
          break
      }
      return text
    },
    cutString(str, len) {
      if (str.length * 2 <= len) {
        return str
      }
      let strlen = 0
      let s = ''
      for (let i = 0; i < str.length; i++) {
        s = s + str.charAt(i)
        if (str.charCodeAt(i) > 128) {
          strlen = strlen + 2
          if (strlen >= len) {
            return s.substring(0, s.length - 1) + '...'
          }
        } else {
          strlen = strlen + 1
          if (strlen >= len) {
            return s.substring(0, s.length - 2) + '...'
          }
        }
      }
      return s
    }
  },
  methods: {
    // 跳转店铺首页
    jumpStore() {
      uni.navigateTo({
        url: `/pages_store/carMaintenanceStore/details/details?storeid=${this.item.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.car-maintenance-item{
  margin-top: 20rpx;
  background-color: #fff;
  padding: 24rpx;
  .store{
    display: flex;
    align-items: center;
    padding-bottom: 24rpx;
    border-bottom: 2rpx solid #eee;
    .info{
      margin-left: 24rpx;
      flex: 1;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .title-wrapper{
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        .title{
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
          display: block;
          max-width: 320rpx;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
        .type{
          height: 30rpx;
          line-height: 30rpx;
          font-size: 20rpx;
          color: #3F3F3F;
          padding: 0 8rpx;
          margin-left: 24rpx;
          background-image: linear-gradient(0deg, #FBD220, #FFE23E);
          border-radius: 5px;
        }
        .type-1, .type-6{
          background-image: linear-gradient(0deg, #FBD220, #FFE23E);
        }
        .type-2{
          background-image: linear-gradient(180deg, #FFEEC8, #FFAD9A);
        }
        .type-3{
          background-image: linear-gradient(0deg, #FF7590, #FFD39B);
        }
        .type-8{
          background-image: linear-gradient(0deg, #93BCFF, #BEF4FF);
        }
        .type-4{
          background-image: linear-gradient(0deg, #A8D36A, #ECF9C3);
        }
      }
      .address-wrapper{
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
        .address{
          display: block;
          flex: 1;
          margin-right: 88rpx;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }
      .time-wrapper{
        display: flex;
        justify-content: space-between;
        margin-top: 16rpx;
        .time{
          font-size: 24rpx;
          color: #666;
        }
        .live-broadcast{
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1rpx solid #FF4B44;
          padding: 0 18rpx;
          border-radius: 40rpx;
          color: #FF4B44;
          .text{
            font-size: 24rpx;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
  .no-service{
    padding-bottom: 0;
    border-bottom: none;
  }
  .service-items{
    display: flex;
    padding-top: 14rpx;
    .label{
      font-size: 28rpx;
      color: #333;
      display: block;
      height: 50rpx;
      line-height: 50rpx;
    }
    .service-items-list{
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      margin-left: 30rpx;
      .item{
        height: 50rpx;
        display: flex;
        align-items: center;
        width: 20%;
        box-sizing: border-box;
        padding-right: 20rpx;
        .text{
          font-size: 26rpx;
          color: #666;
          &::before{
            content: '';
            display: inline-block;
            width: 16rpx;
            height: 16rpx;
            border-radius: 16rpx;
            background-color: #FBD220;
            margin-right: 10rpx;
          }
        }
      }
    }
  }
}
</style>
